<template>
  <div class="index">
    <mt-header fixed title="热力站点数据维护系统">
      <span slot="left" @click="loginAlt">
        <mt-button>
          <img src="../../assets/dl.png" alt="登陆">
        </mt-button>
      </span>
      <span slot="right" @click="linkTo">
        <mt-button>
          <img src="../../assets/bj.png" alt="报警">
        </mt-button>
      </span>
    </mt-header>
    <div class="BoxAD">
      <p class="img_box"></p>
      <p class="p_title">公告标题</p>
      <p class="p_time">发布时间 2019年5月1日</p>
      <p class="p_cont">公告信息公告信息公告信息公告信息公告信息公告信息公告信息公告信息公告信息公告信息</p>
      <p class="ok_button">知道了</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      flag: false
    };
  },
  mounted() {},
  methods: {
    isLogin() {},
    goback() {
      // 点击后退
      this.$router.go(-1);
    },
    loginAlt() {
      //点击登陆
      this.$router.push({ name: "login" });
    },
    linkTo() {
      this.$router.push({ name: "waring" });
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-bar {
  background: #283351 !important;
}
.index {
  width: 100%;
  height: 7rem !important;
  background: #424578;
  position: fixed;
  top: 0;
}
.mui-bar-tab {
  background: #283351 !important;
}
.BoxAD {
  position: relative;
  width: 80%;
  height: 4.5rem;
  margin: 1.2rem 10%;
  background: #505280;
  border-radius: 0.1rem;
  overflow: hidden;
  color: #ffffff;
  .img_box {
    width: 100%;
    height: 2rem;
    background: green;
  }
  .p_title {
    margin: 0.2rem auto 0.1rem;
    color: #ffffff;
    font-size: 0.16rem;
  }
  .p_time {
    color: #dbdbdb;
  }
  .p_cont {
    width: 90%;
    color: #dbdbdb;
    margin: 0 auto;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .ok_button {
    position: absolute;
    bottom: 0;
    border-top: 1px solid #36456e;
    width: 100%;
    height: 0.45rem;
    line-height: 0.45rem;
    margin: 0;
    color: #1b97fb;
    font-size: 0.14rem;
  }
}
</style>